<template>
  <div>
    <!-- 封面 -->
    <div class="bg-wrap my-animation-slide-top">
      <!-- 背景图片 -->
      <el-image
        class="love-image my-el-image"
        lazy
        :src="love.bgCover"
        fit="cover"
      >
        <div slot="error" class="image-slot"></div>
      </el-image>

      <!-- 对象 -->
      <div class="love-wrap transformCenter">
        <div>
          <el-avatar class="love-avatar" :src="manImg"></el-avatar>
          <div class="love-title">
            {{ love.manName }}
          </div>
        </div>
        <div>
          <img class="love-img" src="../assets/fonts/love.png" alt="心心" />
        </div>
        <div>
          <el-avatar class="love-avatar" :src="love.womanCover"></el-avatar>
          <div class="love-title">
            {{ love.womanName }}
          </div>
        </div>
      </div>

      <div id="bannerWave1"></div>
      <div id="bannerWave2"></div>
    </div>

    <!-- 内容 -->
    <div class="love-container">
      <div class="myCenter love-content">
        <!-- 时间 -->
        <div>
          <!-- 计时 -->
          <div>
            <div class="love-time-title1">这是我们一起走过的</div>
            <div class="love-time1">
              第
              <span class="love-time1-item">{{ timing.year }}</span>
              年
              <span class="love-time1-item">{{ timing.month }}</span>
              月
              <span class="love-time1-item">{{ timing.day }}</span>
              日
              <span class="love-time1-item">{{ timing.hour }}</span>
              时
              <span class="love-time1-item">{{ timing.minute }}</span>
              分
              <span class="love-time1-item">{{ timing.second }}</span>
              秒
            </div>
          </div>
          <!-- 倒计时 -->
          <div
            class="love-time-title2"
            v-if="
              !$common.isEmpty(love.countdownTitle) ||
              !$common.isEmpty(love.countdownTime)
            "
          >
            {{ love.countdownTitle }}: {{ countdownChange }}
          </div>
        </div>
      </div>

      <div style="padding: 0 20px">
        <div
          class="family-button shadow-box-mini"
          @click="$router.push('/letter')"
        >
          <span class="family-button-title">去往表白墙</span>
          <span class="family-button-car">
            <svg viewBox="0 0 1024 1024" width="40" height="40">
              <path
                d="M399.502 655.103c0 7.902-6.665 14.311-14.88 14.311H72.188c-8.215 0-14.875-6.407-14.875-14.311v-28.634c0-7.913 6.66-14.315 14.875-14.315h312.435c8.217 0 14.88 6.402 14.88 14.315l-0.001 28.634zM968.167 655.103c0 7.902-6.664 14.311-14.882 14.311H640.851c-8.216 0-14.877-6.407-14.877-14.311v-28.634c0-7.913 6.661-14.315 14.877-14.315h312.436c8.218 0 14.882 6.402 14.882 14.315l-0.002 28.634z"
                fill="#EA0606"
              ></path>
              <path
                d="M968.097 624.008c0 11.563-17.723 20.937-39.583 20.937H97.263c-21.858 0-39.579-9.372-39.579-20.937v-41.876c0-11.562 17.72-20.935 39.579-20.935h831.25c21.86 0 39.583 9.373 39.583 20.935v41.876zM855.003 526.553h-12c0-161.793-151.025-293.421-336.66-293.421-185.633 0-336.656 131.628-336.656 293.421h-12c0-41.334 9.261-81.425 27.527-119.161 17.612-36.384 42.807-69.046 74.886-97.079 65.813-57.509 153.264-89.181 246.243-89.181 92.981 0 180.434 31.672 246.247 89.181 32.079 28.032 57.274 60.693 74.887 97.079 18.264 37.734 27.526 77.826 27.526 119.161z"
                fill="#EA0606"
              ></path>
              <path
                d="M1001.996 588.091c-121.146 13.91-980.875 0-980.875 0s-30.62-203.887 241.944-144.555c171.281-1.178 273.436 0 489.644 0 193.07-59.332 283.186 108.642 249.287 144.555z"
                fill="#EA0606"
              ></path>
              <path d="M500.343 214.379h12v330.342h-12z" fill="#EA0606"></path>
              <path
                d="M333.217 657.192c0 46.174-38.961 83.602-87.029 83.602-48.056 0-87.021-37.428-87.021-83.602 0-46.172 38.963-83.588 87.021-83.588 48.067 0 87.029 37.417 87.029 83.588z"
                fill="#FFFFFF"
              ></path>
              <path
                d="M246.188 743.794c-49.638 0-90.021-38.85-90.021-86.602 0-47.745 40.383-86.588 90.021-86.588 49.642 0 90.029 38.843 90.029 86.588 0 47.752-40.387 86.602-90.029 86.602z m0-167.19c-46.329 0-84.021 36.151-84.021 80.588 0 44.444 37.692 80.602 84.021 80.602 46.333 0 84.029-36.157 84.029-80.602 0-44.436-37.696-80.588-84.029-80.588z"
                fill="#440A0A"
              ></path>
              <path
                d="M309.872 656.757c0 33.159-27.986 60.035-62.491 60.035-34.51 0-62.487-26.876-62.487-60.035 0-33.16 27.977-60.022 62.487-60.022 34.505 0.001 62.491 26.862 62.491 60.022z"
                fill="#440A0A"
              ></path>
              <path
                d="M271.322 657.558c0 11.747-9.918 21.282-22.151 21.282-12.237 0-22.152-9.535-22.152-21.282 0-11.758 9.916-21.277 22.152-21.277 12.233-0.002 22.151 9.519 22.151 21.277z"
                fill="#FFFFFF"
              ></path>
              <path
                d="M875.521 642.811c0 46.175-38.963 83.603-87.027 83.603-48.061 0-87.021-37.428-87.021-83.603 0-46.173 38.962-83.587 87.021-83.587 48.066 0 87.027 37.414 87.027 83.587z"
                fill="#FFFFFF"
              ></path>
              <path
                d="M788.494 729.413c-49.638 0-90.021-38.85-90.021-86.603 0-47.744 40.384-86.587 90.021-86.587 49.642 0 90.027 38.843 90.027 86.587 0 47.753-40.385 86.603-90.027 86.603z m0-167.189c-46.33 0-84.021 36.151-84.021 80.587 0 44.444 37.691 80.603 84.021 80.603 46.333 0 84.027-36.158 84.027-80.603 0-44.436-37.694-80.587-84.027-80.587z"
                fill="#440A0A"
              ></path>
              <path
                d="M852.174 642.374c0 33.159-27.979 60.037-62.486 60.037-34.512 0-62.487-26.878-62.487-60.037 0-33.161 27.977-60.023 62.487-60.023 34.506-0.001 62.486 26.862 62.486 60.023z"
                fill="#440A0A"
              ></path>
              <path
                d="M813.628 643.173c0 11.75-9.919 21.278-22.153 21.278-12.233 0-22.151-9.528-22.151-21.278 0-11.759 9.919-21.275 22.151-21.275 12.235-0.002 22.153 9.516 22.153 21.275z"
                fill="#FFFFFF"
              ></path>
              <path
                d="M518.135 469.838h56.847v12.556h-56.847z"
                fill="#FFFFFF"
              ></path>
              <path
                d="M522.818 468.694c0 7.902-0.648 14.309-1.445 14.309h-30.37c-0.799 0-1.446-6.406-1.446-14.309V440.06c0-7.912 0.647-14.315 1.446-14.315h30.37c0.797 0 1.445 6.403 1.445 14.315v28.634z"
                fill="#EA0606"
              ></path>
            </svg>
          </span>
        </div>
      </div>
      <div style="padding: 0 20px">
        <!-- 卡片 -->
        <div class="card-wrap" v-show="card !== 4">
          <div class="card-content shadow-box-mini" @click="changeCard(1)">
            <div>
              <el-avatar :size="100" :src="cardImg1"> </el-avatar>
            </div>
            <div class="card-right">
              <div class="card-title">点点滴滴</div>
              <div class="card-desc">☀️今朝有酒今朝醉</div>
            </div>
          </div>

          <div class="card-content shadow-box-mini" @click="changeCard(2)">
            <div>
              <el-avatar :size="100" :src="cardImg2"> </el-avatar>
            </div>
            <div class="card-right">
              <div class="card-title">时光相册</div>
              <div class="card-desc">📸记录美好瞬间</div>
            </div>
          </div>

          <div class="card-content shadow-box-mini" @click="changeCard(3)">
            <div>
              <el-avatar :size="100" :src="cardImg3"> </el-avatar>
            </div>
            <div class="card-right">
              <div class="card-title">祝福板</div>
              <div class="card-desc">📋写下对我们的祝福</div>
            </div>
          </div>
        </div>

        <div class="card-container">
          <!-- 第一个卡片展示内容树 -->
          <div
            id="treeHole"
            v-show="card === 1 && !$common.isEmpty(treeHoleList)"
          >
            <treeHole
              :treeHoleList="treeHoleList"
              :avatar="$store.state.webInfo.avatar"
              @launch="launch"
              @deleteTreeHole="deleteTreeHole"
            >
            </treeHole>
          </div>
          <div v-show="card === 2 && !$common.isEmpty(photoTitleList)">
            <!-- 分类标签 -->
            <div
              class="photo-title-warp"
              v-if="!$common.isEmpty(photoTitleList)"
            >
              <div
                v-for="(item, index) in photoTitleList"
                :key="index"
                :class="{
                  isActive: photoPagination.classify === item.classify,
                }"
                @click="changePhotoTitle(item.classify)"
              >
                <proTag
                  :info="item.classify + ' ' + item.photos.length"
                  :color="
                    $constant.before_color_list[Math.floor(Math.random() * 6)]
                  "
                  style="margin: 12px"
                >
                </proTag>
              </div>
            </div>

            <div class="photo-title">
              {{ photoPagination.classify }}
            </div>
            <!-- 图片墙 -->
            <photo :resourcePathList="photoList"></photo>
            <div class="pagination-wrap">
              <div
                @click="pagePhotos()"
                class="pagination"
                v-if="photoPagination.total !== photoList.length"
              >
                下一页
              </div>
              <div v-else style="user-select: none">~~到底啦~~</div>
            </div>
          </div>
          <div v-show="card === 3" class="comment-content">
            <comment
              :source="$constant.userId"
              :type="'love'"
              :userId="$constant.userId"
            ></comment>
          </div>
        </div>
        <div>
          <!-- 页脚 -->
          <myFooter></myFooter>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
const treeHole = () => import("./common/treeHole");
const comment = () => import("./comment/comment");
const myFooter = () => import("./common/myFooter");
const photo = () => import("./common/photo");
const proTag = () => import("./common/proTag");
import cardImg1 from "../assets/img/img11.jpg";
import cardImg2 from "../assets/img/img12.jpg";
import cardImg3 from "../assets/img/img7.jpg";
import manImg from "../assets/img/man.jpg";
import loveList from "../jsonData/love.json";
import photoTitleList from "../jsonData/photoTitleList.json";
import treeHoles from "../jsonData/treeHole.json";
export default {
  components: {
    comment,
    photo,
    treeHole,
    myFooter,
    proTag,
  },

  data() {
    return {
      cardImg1: cardImg1,
      cardImg2: cardImg2,
      cardImg3: cardImg3,
      manImg: manImg,
      adminLove: {},
      love: {},
      photoPagination: {
        current: 1,
        size: 10,
        total: 0,
        resourceType: "lovePhoto",
        classify: "",
      },
      treeHoleList: [],
      photoTitleList: [],
      photoList: [],
      card: null,
      countdownChange: "",
      timing: {
        year: 0,
        month: 0,
        day: 0,
        hour: 0,
        minute: 0,
        second: 0,
      },
    };
  },

  computed: {},

  watch: {
    photoList: {
      handler(newVal, oldVal) {
        this.photoList = newVal;
      },
      deep: true,
    },
  },

  created() {
    this.getAdminFamily();
    this.card = 2;
    this.getPhotoTitles();
  },

  mounted() {},

  methods: {
    //获取分类标签名
    getPhotoTitles() {
      this.photoTitleList = photoTitleList.data;
      this.photoPagination = {
        current: 1,
        size: 10,
        total: 0,
        resourceType: "lovePhoto",
        classify: this.photoTitleList[0].classify,
      };
      this.photoList = this.photoTitleList[0].photos;
    },
    // 获取头部照片信息
    getAdminFamily() {
      if (!this.$common.isEmpty(loveList.data)) {
        this.love = loveList.data;
        this.adminLove = loveList.data;
        this.getLove();
        this.countdown();
        setInterval(() => {
          this.getLove();
          this.countdown();
        }, 1000);
      }
    },
    //切换标签
    changePhotoTitle(classify) {
      if (classify !== this.photoPagination.classify) {
        this.photoPagination = {
          current: 1,
          size: 10,
          total: 0,
          resourceType: "lovePhoto",
          classify: classify,
        };
        photoTitleList.data.forEach((item) => {
          if (item.classify === classify) {
            this.photoList = item.photos;
            this.photoPagination.total = item.length;
          }
        });
      }
    },
    pagePhotos() {},
    changeCard(card) {
      if (this.card !== card) {
        this.card = card;
      } else {
        card = 1;
        this.card = 1;
        this.love = this.adminLove;
      }

      if (card === 1) {
        if (this.$common.isEmpty(this.treeHoleList)) {
          this.getWeiYan();
        }
      } else if (card === 2) {
        if (this.$common.isEmpty(this.photoTitleList)) {
          this.getPhotoTitles();
        }
      }
    },
    getLove() {
      if (this.$common.isEmpty(this.love.timing)) {
        return;
      }
      let diff = this.$common.timeDiff(this.love.timing);
      this.timing.year = diff.diffYear;
      this.timing.month = diff.diffMonth;
      this.timing.day = diff.diffDay;
      this.timing.hour = diff.diffHour;
      this.timing.minute = diff.diffMinute;
      this.timing.second = diff.diffSecond;
    },
    countdown() {
      if (this.$common.isEmpty(this.love.countdownTime)) {
        return;
      }
      let countdown = this.$common.countdown(this.love.countdownTime);
      this.countdownChange =
        countdown.d +
        "天" +
        countdown.h +
        "时" +
        countdown.m +
        "分" +
        countdown.s +
        "秒";
    },

    //树形结构底部飞机图标，点击后触发
    launch() {
      if (this.weiYanPagination.total !== this.treeHoleList.length) {
        this.weiYanPagination.current = this.weiYanPagination.current + 1;
        this.getWeiYan();
      } else {
        this.$message({
          message: "~~到底啦~~",
          type: "warning",
        });
      }
    },

    //获取卡片1的内容树
    getWeiYan() {
      // this.$http
      //   .post(
      //     this.$constant.baseURL + "/weiYan/listWeiYan",
      //     this.weiYanPagination
      //   )
      //   .then((res) => {
      if (!this.$common.isEmpty(treeHoles.data)) {
        treeHoles.data.forEach((c) => {
          c.content = c.content.replace(
            /\n{2,}/g,
            '<div style="height: 12px"></div>'
          );
          c.content = c.content.replace(/\n/g, "<br/>");
          c.content = this.$common.faceReg(c.content);
          c.content = this.$common.pictureReg(c.content);
        });
        this.treeHoleList = this.treeHoleList.concat(treeHoles.data);
        this.weiYanPagination.total = treeHoles.data.length;
      }
      this.$nextTick(() => {
        this.$common.imgShow("#treeHole .pictureReg");
      });
      // })
      //   .catch((error) => {
      //     this.$message({
      //       message: error.message,
      //       type: "error",
      //     });
      //   });
    },

    // 内容树删除
    deleteTreeHole(id) {
      // if (this.$common.isEmpty(this.$store.state.currentUser)) {
      //   this.$message({
      //     message: "请先登录！",
      //     type: "error",
      //   });
      //   return;
      // }

      this.$confirm("确认删除？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "success",
        center: true,
      })
        .then((res) => {
          this.$message({
            type: "success",
            message: "删除成功!",
          });
          this.treeHoleList = this.treeHoleList.filter((c) => c.id !== id);
        })
        .catch((error) => {
          this.$message({
            message: error.message,
            type: "error",
          });
        });
    },
  },
};
</script>

<style scoped>
.love-container {
  background-image: linear-gradient(
      to right,
      rgba(37, 82, 110, 0.1) 1px,
      var(--background) 1px
    ),
    linear-gradient(
      to bottom,
      rgba(37, 82, 110, 0.1) 1px,
      var(--background) 1px
    );
  background-size: 3rem 3rem;
  /*background: var(--background);*/
}

.bg-wrap {
  height: 55vh;
  position: relative;
  overflow: hidden;
}

.love-image::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: var(--miniMask);
}

.love-wrap {
  width: 90%;
  background: rgba(255, 255, 255, 0.1);
  max-width: 950px;
  border-radius: 3em;
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 50px 70px 30px 70px;
}

.love-avatar {
  border: rgba(255, 255, 255, 0.2) 4px solid;
  width: 180px;
  height: 180px;
}

.love-title {
  margin-top: 15px;
  text-align: center;
  font-size: 25px;
  font-weight: 700;
  color: var(--white);
}

.love-img {
  animation: imgScale 2s linear infinite;
  width: 120px;
  height: 120px;
}

#bannerWave1 {
  height: 84px;
  background: var(--bannerWave1);
  position: absolute;
  width: 200%;
  bottom: 0;
  z-index: 10;
  animation: gradientBG 120s linear infinite;
}

#bannerWave2 {
  height: 100px;
  background: var(--bannerWave2);
  position: absolute;
  width: 400%;
  bottom: 0;
  z-index: 5;
  animation: gradientBG 120s linear infinite;
}

.love-content {
  max-width: 1200px;
  overflow: hidden;
  margin: 20px auto 0;
  user-select: none;
}

.love-time-title1 {
  font-size: 2rem;
  font-weight: 600;
  letter-spacing: 0.2rem;
  line-height: 4rem;
  text-align: center;
  background-image: linear-gradient(
    270deg,
    #ff4500,
    #ffa500,
    #ffd700,
    #90ee90,
    #00ffff,
    #1e90ff,
    #9370db,
    #ff69b4,
    #ff4500
  );
  -webkit-background-clip: text;
  animation: jianBian 60s linear infinite;
  width: 3000px;
  color: rgba(0, 0, 0, 0);
}

.love-time-title2 {
  text-align: center;
  font-size: 1.5rem;
  line-height: 4rem;
  font-weight: 600;
  letter-spacing: 2px;
}

.love-time1 {
  text-align: center;
  font-size: 2rem;
  font-weight: 700;
}

.love-time1-item {
  font-size: 4rem;
  font-weight: 700;
}

.card-wrap {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  padding: 20px 0;
}

.card-content {
  display: flex;
  padding: 25px;
  margin: 25px auto;
  border-radius: 20px;
  max-width: 780px;
  cursor: pointer;
  transition: all 0.3s;
  background: var(--background);
}

.card-content:hover,
.family-button:hover,
.family-wrap:hover {
  transform: translateY(-6px);
}

.card-right {
  margin-left: 20px;
}

.card-title {
  font-size: 1.6rem;
  letter-spacing: 0.2rem;
  line-height: 3.5rem;
  font-weight: 700;
}

.card-desc {
  font-size: 1.1rem;
  letter-spacing: 0.2rem;
  color: #777777;
}

.card-container {
  max-width: 1500px;
  margin: 20px auto 40px;
}

.pagination-wrap {
  display: flex;
  justify-content: center;
  margin-top: 40px;
}

.pagination {
  padding: 13px 15px;
  border: 1px solid var(--lightGray);
  border-radius: 3rem;
  color: var(--greyFont);
  width: 100px;
  user-select: none;
  cursor: pointer;
  text-align: center;
}

.pagination:hover {
  border: 1px solid var(--themeBackground);
  color: var(--themeBackground);
  box-shadow: 0 0 5px var(--themeBackground);
}

.comment-content {
  max-width: 1000px;
  margin: 0 auto;
}

.photo-title {
  text-align: center;
  font-size: 30px;
  font-weight: 700;
  line-height: 80px;
  letter-spacing: 2px;
}

.photo-title-warp {
  max-width: 1150px;
  margin: 50px auto;
  padding: 20px;
  border-radius: 10px;
  display: flex;
  flex-wrap: wrap;
}

.isActive {
  animation: scale 2.5s ease-in-out infinite;
}

.family-button {
  position: relative;
  overflow: hidden;
  height: 150px;
  color: var(--white);
  margin: 50px auto 15px;
  border-radius: 20px;
  max-width: 350px;
  cursor: pointer;
  transition: all 0.3s;
  background: var(--love) center center / cover no-repeat;
  user-select: none;
}

.family-button::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: var(--miniMask);
}

.family-button-title {
  position: absolute;
  line-height: 150px;
  margin-left: 20px;
  font-size: 25px;
  font-weight: 700;
  color: var(--white);
}

.family-button-car {
  position: absolute;
  margin-left: 220px;
  margin-top: 55px;
  animation: passing 4s linear infinite;
}

.family-container {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  margin-bottom: 40px;
}

.family-wrap {
  cursor: pointer;
  width: 350px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 15px 25px 5px 25px;
  margin: 20px;
  transition: all 0.3s;
  user-select: none;
}

.family-avatar {
  border: rgba(255, 255, 255, 0.2) 4px solid;
  width: 90px;
  height: 90px;
}

.family-title {
  margin-top: 15px;
  text-align: center;
  font-size: 20px;
  font-weight: 700;
  color: var(--white);
}

.family-img {
  animation: imgScale 2s linear infinite;
  width: 60px;
  height: 60px;
}

.family-bottom-wrap {
  display: flex;
  justify-content: space-around;
  margin: 0 0 40px;
}

.family-bottom {
  color: var(--white);
  border-radius: 3rem;
  width: 150px;
  text-align: center;
  height: 50px;
  cursor: pointer;
  user-select: none;
}

.form-main {
  animation: hideToShow 2s;
  border-radius: 12px;
  overflow: hidden;
}

.user-content > div {
  height: 65px;
  display: flex;
  align-items: center;
}

.user-content >>> .el-input__inner {
  border: none;
  height: 40px;
  width: 250px;
  background: var(--whiteMask);
}

.user-content >>> .el-textarea__inner {
  border: none;
  width: 250px;
  background: var(--whiteMask);
}

.user-content >>> .el-input__count {
  background: var(--transparent);
  user-select: none;
}

.form-friend {
  background-color: #eeeeee;
  padding: 20px 0;
}

.form-title {
  margin: 10px;
  text-align: center;
}

@media screen and (max-width: 1200px) {
  .user-content > div {
    display: unset;
    align-items: unset;
  }
}

@media screen and (max-width: 800px) {
  .love-wrap {
    border-radius: 1.5em;
    padding: 40px 30px 10px 30px;
  }

  .love-avatar {
    width: 120px;
    height: 120px;
  }

  .love-img {
    width: 100px;
    height: 100px;
  }

  .love-time1 {
    font-size: 1.4rem;
  }

  .love-time1-item {
    font-size: 3rem;
  }
}

@media screen and (max-width: 600px) {
  .love-wrap {
    padding: 30px 20px 10px 20px;
  }

  .love-avatar {
    width: 100px;
    height: 100px;
  }

  .love-img {
    width: 80px;
    height: 80px;
  }

  .love-time1 {
    font-size: 1rem;
  }

  .love-time1-item {
    font-size: 1.8rem;
  }

  .love-time-title2 {
    font-size: 1.2rem;
  }

  .user-content >>> .el-textarea__inner {
    width: 100%;
  }

  .user-content >>> .el-input__inner {
    width: 190px;
  }

  .card-container .tree-hole-container {
    padding: 0;
  }
}

@media screen and (max-width: 1150px) {
  .card-wrap {
    display: unset;
    justify-content: unset;
  }

  .photo-title-warp {
    max-width: 780px;
  }

  .family-button {
    max-width: 780px;
  }
}
</style>
